<template>
    <div class="process-monitoring-box">
        <div class="certificate-alert-tabs">
            <a-tabs v-model:activeKey="activeKey" type="card" @change="callback">
                <a-tab-pane key="药品" tab="药品"></a-tab-pane>
                <a-tab-pane key="化妆品" tab="化妆品"></a-tab-pane>
                <a-tab-pane key="医疗器械" tab="医疗器械"></a-tab-pane>
            </a-tabs>
        </div>
        <commpVxeTable
        :key="dataTableKey"
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         :occupancyHeight="55"
         ref="acceptanceRegistrationRef"
         >
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportData">导出数据</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:fscfw_btn="{row}">
                <!--  marginLeft: `${buttonWidth}px`, -->
                <div :style="{ clear: 'both', whiteSpace: 'nowrap' }">
                    <a-popover placement="bottom" style="width: 150px;">
                        <template slot="content">
                            <div>{{ row.fscfw }}</div>
                        </template>
                        <!-- <template slot="title">
                            <span>Title</span>
                        </template> -->
                        <span>{{ row.fscfw }}</span>
                    </a-popover>
                </div>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="detailClick(row)">查看详情</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <!-- <increase ref="refModel" @renewChange="renewChange" /> -->
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import increase from './increase.vue'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import {
    queryJobByJobIdServe,
    getSqsxBm,
} from './service/index'
export default {
    components:{
        commpVxeTable,
        increase
    },
    props:{

    },
    data(){
        return{
            dataTableKey:null,
            activeKey:'药品',
            buttonWidth:70,
            addEditParameter:{},
            formItem:[
            {
                label: '企业名称',
                model: 'fqymc',
            },{
                label: '信用代码',
                model: 'creditCode',
            }],//
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                fywflcode:blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                paramet:{
                    fqylx:'药品',
                }
            },
            columnsVxe:[
            // { 
            //     type: 'checkbox', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            {
                title: '企业名称', 
                field: 'fqymc',
            },{
                title: '社会信用代码',
                field: 'ftyshxydm',
            },{
                title: '地址',
                field: 'fqyzszcdz',
            },{
                title: '联系人',
                field: 'fqylxr',
            },{
                title: '联系电话',
                field: 'fqylxrdh',
            },{
                title: '生产范围',
                field: 'fscfw',
                slots: {
                // 使用插槽模板渲染
                    default: 'fscfw_btn',
                },
                showOverflow:'ellipsis',
            },{
                title: '操作',
                field: 'id',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                }
            }],
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        renewChange(){

        },
        detailClick(row){//查看详情
            //console.log('查看详情',row)
            // this.$refs.refModel.enterpriseComprehensiveDetailsvisible = true
            // this.$refs.refModel.getData(row)
            this.$router.push({path:'/enterpriseComprehensive/increase?id='+row.id})
        },
        exportData(){
            this.$message.warning('开发中，敬请期待！')
        },
        callback(){
            this.dataTableConfig.paramet = {
                fqylx:this.activeKey
            }
            this.dataTableKey = Date.now()
        },
    }
}
</script>
<style lang="less">
.process-monitoring-box{
    background-color: #fff;
    .certificate-alert-tabs{
        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
            padding-right: 30px;
            margin-right: 10px !important;
        }
        .ant-tabs-bar{
            margin-bottom: 5px;
        }
        .ant-tabs-tab{
            border-radius: 10px 10px 0 0 !important;
        }
        .ant-tabs-nav-container{
            padding-left: 10px;
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
        }
        .ant-tabs-tab-active{
            background-color: #5ca3e5 !important;
            color: #fff !important;
            border-color: #5ca3e5 !important;
            box-shadow: 0px 0px 12px 0px #5ca3e5;
        }
    }
}

</style>